import {useState} from "react";
// import React from 'react';

export default function Counter() { 
    console.log('组件渲染');
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(false);
    const [fontSize, setFontSize] = useState(20);
    console.log("初始化count：", count);
    console.log("初始化flag：", flag);
    return (
        <>
            <div className="container">
                <span className="text">全局组件：scss样式</span>
            </div>
            <p style={{fontSize: fontSize + 'px',  color: 'blue'}}>
                全局组件：内联样式
            </p>
            <p className="box">
                全局组件：文件样式
            </p>
            <button onClick={() => {
                    console.log('触发更新');
                    // 每次 setCount 都基于初始的 count = 0 值，最终执行顺序为
                    // setCount(count + 1);// 0 + 1 = 1
                    // setCount(count - 2);// 0 - 2 = -2
                    // setCount(count + 3);// // 0 + 3 = 3 ← 最终结果
                    setCount((count) => count + 1);// 0+ 1 = 1
                    setCount((count) => count - 2);// 1- 2 = -1
                    setCount((count) => count + 3);// -1+ 3 = 2
                    setFlag(true);
                    console.log("state 的count值：", count);
                    console.log("state 的flag值：", flag);
                }}>Count is {count}
            </button>
        </>

    )
}